<template>
    <div class="under-construction">
        <div class="content">
            <div class="construction-icon">
                <svg-icon name="common-construction" />
            </div>
            <h2>{{ title || '页面开发中' }}</h2>
            <p>{{ message || '该功能正在建设中，敬请期待...' }}</p>
            <van-button type="primary" @click="router.back()">返回上一页</van-button>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

defineProps({
    title: String,
    message: String
})
</script>

<style lang="scss" scoped>
.under-construction {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    padding: 20px;

    .content {
        text-align: center;
        padding: 40px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        max-width: 400px;
        width: 100%;

        .icon {
            font-size: 64px;
            color: #4A60A1;
            margin-bottom: 24px;
        }

        h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 16px;
        }

        p {
            color: #666;
            margin-bottom: 24px;
        }
    }
}
</style> 